<script setup>
import {ref} from 'vue';

// 穿梭框选项
// 左边穿梭框选项
const leftOptions = ref([
  {key: '1', label: '12x F-16CM Blk 52 Falcon'},
  {key: '2', label: 'Blue Base(Single-UnitAirfield(2x 20001-2600m Runways))'},
]);
// 右边穿梭框选项
const rightOptions = ref([]);

// 将单个选项移到右边穿梭框
const moveToRight = (option) => {
  leftOptions.value = leftOptions.value.filter(item => item !== option);
  rightOptions.value.push(option);
};
// 将单个选项移到左边穿梭框
const moveToLeft = (option) => {
  rightOptions.value = rightOptions.value.filter(item => item !== option);
  leftOptions.value.push(option);
};
// 将所有选项移到右边穿梭框
const moveToRightAll = () => {
  rightOptions.value = rightOptions.value.concat(leftOptions.value);
  leftOptions.value = [];
};

// 将所有选项移到左边穿梭框
const moveToLeftAll = () => {
  leftOptions.value = leftOptions.value.concat(rightOptions.value);
  rightOptions.value = [];
};

</script>

<!--Mission Editor上半部分的穿梭框部分-->
<template>
  <div id="NOption">
    <div class="transfer">
      <!--左侧穿梭框区域-->
      <div class="transfer-panel">
        <!--穿梭框区域-->
        <div style="height: 85px;">
          <span>Units assigned to mission</span>
          <!--选项列表-->
          <ul class="transfer-list">
            <li v-for="option in leftOptions" :key="option.key" @click="moveToRight(option)">
              {{ option.label }}
            </li>
          </ul>
        </div>

        <!--按钮区域-->
        <div>
          <!--上方按钮-->
          <div class="button-area">
            <button class="left-up-button">
              Ready selected aircraft
            </button>
          </div>

          <!-- 下方按钮 -->
          <div class="button-area">

            <button class="left-down-button">
              Mark selected as escorts
            </button>
            <button class="left-down-button">
              Un-Mark selected from escorts
            </button>
          </div>
        </div>

      </div>

      <!--中间按钮-->
      <div class="transfer-operations">
        <!--所有选项移到右边-->
        <button @click="moveToRightAll" class="Option-button">
          >>
        </button>
        <!--所有选项移到左边-->
        <button @click="moveToLeftAll" class="Option-button">
          <<
        </button>
      </div>

      <!--右侧穿梭框区域-->
      <div class="transfer-panel">
        <div class=" right-transfer">
          <!--穿梭框区域-->
          <div style="height: 85px">
            <span>Unassigned units</span>
            <!--选项列表-->
            <ul class="transfer-list">
              <li v-for="option in rightOptions" :key="option.key" @click="moveToLeft(option)">
                {{ option.label }}
              </li>
            </ul>
          </div>
        </div>
        <!--按钮区域-->
        <div>
          <div class="button-area">
            <button class="left-up-button ">
              Ready selected aircraft
            </button>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>

<style>
.transfer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.transfer-panel {
  flex: 1;
  background-color: #3c3f41;
  color: white;
  margin-left: 3px;
  height: 120px;
  border: 1px solid white;
  font-size: 10px;
}

.right-transfer {
  overflow:scroll;
}

.transfer-operations {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

.transfer-list {
  list-style: none;
  padding: 0;
  cursor: pointer;
  max-height: 120px;
  overflow-y: auto;
  font-size: 10px;
}

li {
  padding: 5px;
  margin-top: -6px;
  transition: background-color 0.3s;
  font-size: 10px;
}

li:hover {
  background-color: #f0f0f0;
  color: #1a1a1a;
}

.Option-button {
  padding: 5px 10px;
  background-color: rgba(60,63,65,0.42);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 10px;
}

.button-area {
  display: flex;
  justify-content: space-between;
}

.left-up-button {
  width: 100%;
  background-color: rgba(60,63,65,0.42);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 10px;
}

.left-down-button {
  flex: 1;
  background-color: rgba(60,63,65,0.42);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 10px;
}

</style>